<template>
  <div class="view-container">
    <div class="wrapper">
  <div class="wrapper-top-Title">数智纺MES/MOM</div>
  <span class="wrapper-top-sub">助力企业打造智能工厂，<br />实现精益生产、精细管理，降本增效</span>
</div>
<div class="wrapper-white">
  <div class="top-Title">功能模块</div>
  <span class="top-sub">包含众多功能模块，可根据客户及企业的实际需求定制开发，<br />进行模块组合。</span>
 <div class="wrapper-list-back">
    <div  v-for="(item, index) in listArr" :key="index">
      <div class="wrapper-list-white" @click="openUrl(item.id)">
        <span class="wrapper-list-txt">{{item.txt}}</span>
      </div>
    </div>
  </div>
  <div class="top-iamge">
    <van-image width="100%" height="100%" fit="cover"
      src="https://oss.cloudcpc.com/4f623b9bbe3a3e1098264f8766c7e1df.png" />
  </div>
</div>
<div class="framework-wrapper">
  <div class="framework-img-back">
    <div class="framework-Title">产品架构</div>
    <span class="framework-sub">T-MES系统按照工业互联平台框架标准分为 <br />三个层次：控制层、平台层、应用层。</span>
    <div scroll-x="true" style="width: 100%; overflow-x: auto">
      <div class="framework-scroll-white">
        <div class="framework-scroll-view-white">
           <div v-for="(item, index) in frameworkArr" :key="index" class="wow fadeInRight"
           data-wow-duration="0.4s" :data-wow-delay="index/frameworkArr.length+'s'">            <div class="framework-white">
              <div class="framework-white-num">
                <van-image width="100%" height="100%" fit="cover" :src="item.url" />
              </div>
              <div class="framework-white-right">
                <span class="framework-white-txt">{{item.txt}}</span>
                <span class="framework-white-sub">{{item.sub}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="framework-down">
    <div class="framework-down-iamge">
      <van-image width="100%" height="100%" fit="cover"
        src="https://oss.cloudcpc.com/9c7db77c8b7438009702a68ada409d67.png" />
    </div>
    <div class="left-img">
      <van-image width="100%" height="100%" fit="cover"
        src="https://oss.cloudcpc.com/97cd76e21bd4390e970976c6fc39c102.png" />
    </div>
    <div class="right-img">
      <van-image width="100%" height="100%" fit="cover"
        src="https://oss.cloudcpc.com/bfcda21ef0e6350faef78dc269f27c18.png" />
    </div>
    <div class="left-list">
        <div  v-for="(item, index) in leftArrr" :key="index" class="wow fadeInLeft"
           data-wow-duration="0.4s" :data-wow-delay="index/leftArrr.length+'s'">
        <div class="left-list-white">
          <div class="left-list-img">
            <van-image width="100%" height="100%" fit="cover"
              src="https://oss.cloudcpc.com/58c8b932bd4a3763be07dcbab045182f.png" />
          </div>
          <span class="left-list-sub">{{item.type}}</span>
        </div>
      </div>
    </div>
    <div class="right-list">
      <div v-for="(item, index) in rightArrr" :key="index" class="wow fadeInRight"
           data-wow-duration="0.4s" :data-wow-delay="index/rightArrr.length+'s'">
        <div class="right-list-white">
          <div class="down-left-img">
            <van-image width="100%" height="100%" fit="cover"
              src="https://oss.cloudcpc.com/4ee8599493a13dabb7a533265d061af5.png" />
          </div>
          <span class="down-left-sub">{{item.type}}</span>
        </div>
      </div>
    </div>
    <div class="down-left-white">
      <div class="down-left-img">
        <van-image width="100%" height="100%" fit="cover"
          src="https://oss.cloudcpc.com/0134f6450ee030a088ad36c08cb3a881.png" />
      </div>
      <span class="down-left-sub">数据采集与监视控制(SCADA)</span>
    </div>
    <div class="down-right-white">
      <div class="down-left-img">
        <van-image width="100%" height="100%" fit="cover"
          src="https://oss.cloudcpc.com/0134f6450ee030a088ad36c08cb3a881.png" />
      </div>
      <span class="down-left-sub">设备、仪器、物料、过程</span>
    </div>
  </div>
</div>
<div class="overview-wrapper">
  <div class="overview-Title">产品概述</div>
  <div class="overview-white wow fadeInRight">
    <div class="overview-white-name" :style="{marginLeft: 7+'px'}">MES</div>
    <div class="overview-white-sub">处于计划层和现场自动化系统之间的执行层， 主要负责车间生产管理和调度执行。数智纺 MES系统通过强调制造过程的整体优化来帮 助纺织企业实施闭环生产，建立一体化和实
      时化的信息体系。</div>
  </div>
<div class="overview-white  wow fadeInRight">
    <div class="overview-white-name" :style="{marginLeft: 4+'px'}">MOM</div>
    <div class="overview-white-sub">随着工业企业的业务扩展与创新信息技术的持续融合， 新一代的制造运营管理系统MOM基于指标体系，构建全 级次、全领域、全流程的管控模式，帮助制造企业提 高管控效率。
    </div>
  </div>
  <div class="overview-top-iamge">
    <van-image width="100%" height="100%" fit="cover"
      src="https://oss.cloudcpc.com/1766d818937032f787ed3f2855fdb5aa.png" />
  </div>
  <div class="overview-down-iamge">
    <van-image width="100%" height="100%" fit="cover"
      src="https://oss.cloudcpc.com/38d873bdd7653964bd12828763bebc4c.png" />
  </div>
  <div scroll-x="true" style="width: 100%; overflow-x: auto">
    <div class="framework-scroll-white">
      <div class="framework-scroll-view-white">
        <div class="overview-list-white">
          <div class="overview-list-num">
            <div class="overview-list-num-iamge">
              <van-image width="100%" height="100%" fit="cover"
                src="https://oss.cloudcpc.com/adcc57944d82308dbc00215c52b19d0c.png" />
            </div>
          </div>
                 <div class="overview-white-right wow fadeInRight" 
          data-wow-duration="0.4s" data-wow-delay="0.2">
            <span class="overview-white-txt">提升质量</span>
          </div>
        </div>
        <div class="overview-list-white">
          <div class="overview-list-num overview-list-num2">
            <div class="overview-list-num-iamge2">
              <van-image width="100%" height="100%" fit="cover"
                src="https://oss.cloudcpc.com/11efcc5f6783396989d7829aaa563752.png" />
            </div>
          </div>
                   <div class="overview-white-right wow fadeInRight"
           data-wow-duration="0.4s" data-wow-delay="0.4">
            <span class="overview-white-txt">降低成本</span>
          </div>
        </div>
        <div class="overview-list-white">
          <div class="overview-list-num overview-list-num3">
            <div class="overview-list-num-iamge2">
              <van-image width="100%" height="100%" fit="cover"
                src="https://oss.cloudcpc.com/c6ae4361ee903a65b8d4d67cdb8de69e.png" />
            </div>
          </div>
          <div class="overview-white-right wow fadeInRight" 
          data-wow-duration="0.4s" data-wow-delay="0.6">
            <span class="overview-white-txt">缩短周期</span>
          </div>
        </div>
        <div class="overview-list-white">
          <div class="overview-list-num overview-list-num4">
            <div class="overview-list-num-iamge3">
              <van-image width="100%" height="100%" fit="cover"
                src="https://oss.cloudcpc.com/9f0c24a3cfa838c2b384db7cbd7e8358.png" />
            </div>
          </div>
               <div class="overview-white-right wow fadeInRight" 
          data-wow-duration="0.4s" data-wow-delay="0.8">
            <span class="overview-white-txt">提升效率</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="value-wrapper">
  <div class="value-back">
    <div class="value-top-Title">产品价值</div>
    <span class="value-top-sub">基于工业互联网模式，赋能智造全价值链， 将精益思想植入其中，自上而下贯彻执行，帮助纺织企业实现智能制造转型升级。</span>
  </div>
  <div class="value-scroll">
    <div scroll-x="true" style="width: 100%; overflow-x: auto">
      <div class="framework-scroll-white">
        <div class="value-scroll-view-white">
  <div  v-for="(item, index) in valueArr" :key="index" 
          class="wow fadeInRight" data-wow-duration="0.4s" :data-wow-delay="index/valueArr.length+'s'">            <div class="value-img"
              :style="{background: 'url('+ item.img +')',backgroundSize: 'cover',marginTop: (item.type==0?'0':'70')+'px'}">
              <span class="value-white-sub">{{item.sub}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="me-wrapper">
  <div class="me-top-Title">选择我们</div>
  <span class="me-top-sub">“数智纺”T-MES 智能纺织专家</span>
  <div class="me-iamge">
    <van-image width="100%" height="100%" fit="cover"
      src="https://oss.cloudcpc.com/87e9e1bd3b133dc88889d0aaf8bc9fd0.png" />
  </div>
  <div class="me-sub-back">
    <span
      class="me-sub">纺友“数智纺”专注于纺织工业数字化及智能化改造，形成云计算核心能力，利用大数据助力纺织企业实现数字化、智能化转型。<br /><br />提供专业的MES/ERP/WMS/可视化系统/工业VR/APP开发等服务，帮助企业实现生产可视、智能物流，智能仓储，智慧配棉，自动排产等功能<br /><br />深度整合上下游资源，为纺织企业提供原料/专备件采购、供应链金融等全方位一站式服务平台。</span>
  </div>
</div>
  </div>
</template>

<script>
import { WxShare } from '@/utils/share'
import { redirectUrl } from '@/utils/config'
import Swiper from 'swiper'
import { WOW } from 'wowjs'
export default {
  data() {
    return {
      listArr:[
      {
        id:0,
        txt:'物料管理',
        path:'/pages/material/index',
      },
      {
        id:1,
        txt:'质量管理',
        path:'/pages/quality/index',
      },
      {
        id:2,
        txt:'设备管理',
        path:'/pages/equipment/index',
      },
      {
        id:3,
        txt:'生产管理',
        path:'/pages/productionManagement/index',
      },
      {
        id:4,
        txt:'智能配棉',
        path:'/pages/cottonAssorting/index',
      },
      {
        id:5,
        txt:'数据采集',
        path:'/pages/DataCollection/index', 
      },
      {
        id:6,
        txt:'可视化系统',
        path:'/pages/visualization/index',
      },
      {
        id:7,
        txt:'产品数据管理',
        path:'/pages/DeviceData/index',
      }
    ],
      frameworkArr: [
      {
        url:'https://oss.cloudcpc.com/b38c24c56d523f0697330e6e001e5bf1.png',
        txt: '控制层',
        sub: '基础设施层，通过SCADA接入设备，通过协议解析进行数据采集',
      },
      {
        url:'https://oss.cloudcpc.com/7a9441a7100634599aad8c95256bbdf2.png',
        txt: '平台层',
        sub: 'PaaS（数据中台、数据池），对企业所有 资源的数据信息汇总、处理、分析、传输',
      },
      {
        url:'https://oss.cloudcpc.com/4e5ac3bc438d388b8c537f175635514b.png',
        txt: '应用层',
        sub: '与生产有关的计划任务、生产调度、 质量控制、设备维护等具体执行',
      }],
      valueArr:[
        {
          type: 0,
          img:'https://oss.cloudcpc.com/f4b5631a01ca398e93d4ba1ab32f1164.png',
          sub:'工业大数据运用，构建生产制造的“神经中枢”，智能管理，科学决策。',
        },
        {
          type: 1,
          img:'https://oss.cloudcpc.com/f5000e19660a34d98aa1ab3a97e3bc10.png',
          sub:'在MES基础上，为纺织企业量身定制自动排产、智慧配棉等功能。',
        },
        {
          type: 0,
          img:'https://oss.cloudcpc.com/b37243b5b5d9380286492dd4b85a2da0.png',
          sub:'优化纺织工艺，改善业务模式，柔性协同、智慧互通',
        },
        {
          type: 1,
          img:'https://oss.cloudcpc.com/ff85122ede2137f694f13d31a7858414.png',
          sub:'提质、降本、增效，提高市场竞争力',
        },
        {
          type: 0,
          img:'https://oss.cloudcpc.com/1e147fc0b95039fdbec508e59f67af76.png',
          sub:'全面助力纺织企业实现数字化转型和智能化升级',
        },
      ],
      leftArrr:[
          {
            type:'基础数据管理平台',
          },
          {
            type:'组织与人力资源',
          },
          {
            type:'角色与权限管理',
          }
        ],
        rightArrr:[
          {
            type:'产品数据管理',
          },
          {
            type:'智慧配棉',
          },
          {
            type:'生产管理',
          },
          {
            type:'质量管理',
          },
          {
            type:'物料管理',
          },
          {
            type:'设备管理',
          },
        ],
    }
  },
  mounted() {
 this.$nextTick(() => {
      let wow = new WOW({
        boxClass: 'wow', /// 动画元件css类（默认为wow）
        animateClass: 'animated', // 动画css类（默认为animated）
        offset: 0, // 到元素距离触发动画（当默认为0）
        mobile: true, // 在移动设备上触发动画（默认为true）
        live: true // 对异步加载的内容进行操作（默认为true）
      })
      // wow.start()
      wow.init()
    })
this.$nextTick(() => {
      var swiper = new Swiper('.down-swiper', {
        pagination: {
          el: '.swiper-pagination'
        }
      })

      this.$nextTick(() => {
      /* eslint-disable no-new */
      new Swiper('.honorSwiper', {
        watchSlidesProgress: true,
        slidesPerView: 2.3,
        centeredSlides: true,
        loop: true,
        // zoom: true,
        loopedSlides: 3,
        autoplay: {
          delay: 5000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        on: {
          progress: function (progress) {
            // console.log(progress)
            for (let i = 0; i < this.slides.length; i++) {
              var slide = this.slides.eq(i)
              // console.log(slide)
              var slideProgress = this.slides[i].progress
              var modify = 1
              if (Math.abs(slideProgress) > 1) {
                modify = (Math.abs(slideProgress) - 1) * 0.3 + 1
              }
              // 长度 221是每个swiper-slide宽度的一半  230
              var zIndex = 999 - Math.abs(Math.round(10 * slideProgress))
              var translate = slideProgress * modify * 280 + 'px'
              var scale = 1 - Math.abs(slideProgress) / 10 // 5
              slide.transform(
                'translateX(' + translate + ') scale(' + scale + ')'
              )

              slide.css('zIndex', zIndex)
              slide.css('opacity', 1)
              if (Math.abs(slideProgress) > 3) {
                slide.css('opacity', 0)
              }
            }
          },
          setTransition: function (transition) {
            for (var i = 0; i < this.slides.length; i++) {
              var slide = this.slides.eq(i)
              slide.transition(transition)
            }
          }
        }
      })
    })

      var swiper = new Swiper('.img-swiper', {
        direction: 'horizontal',
        loop: false,
        slidesPerView: 'auto',
        centeredSlides: true,
        spaceBetween: 20,
        observer: true,
        observeParents: true
      })
    })
  },

  methods: {
    chooseClass(e) {
      this.tabIndex = e
    },
    openUrl(e){
       switch (e) {
        case 0:
          this.$router.push({ path: '/material' })
          break
        case 1:
          this.$router.push({ path: '/quality' })
          break
        case 2:
          this.$router.push({ path: '/equipment' })
          break
        case 3:
          this.$router.push({ path: '/production' })
          break
        case 4:
          this.$router.push({ path: '/cotton' })
          break
        case 5:
          this.$router.push({ path: '/dataColl' })
          break
        case 6:
          this.$router.push({ path: '/visualization' })
          break
        case 7:
           this.$router.push({ path: '/device' })
          break
        default:
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import './index';
</style>
